<template>
    <div>
        <icons @click.native="selectLang" color="blueviolet" type="language" :size="24" class="language-icon" />
    </div>
</template>

<script>
import icons from '_c/icons'
export default {
  components: {
    icons
  },
  name: 'Language',
  props: {
    lang: String
  },
  data () {
    return {

    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
    }
  },
  methods: {
    selectLang () {
      if (this.lang == 'zh-CN') {
        this.$Modal.confirm({
          title: '切换语言',
          content: '<p>是否确定将语言切换至英文？</p>',
          onOk: () => {
            this.$emit('on-lang-change', 'en-US')
            window.location.reload()
          }
        })
      } else {
        this.$Modal.confirm({
          title: 'Switch language',
          content: '<p>Are you sure you want to switch the language to Chinese？</p>',
          onOk: () => {
            this.$emit('on-lang-change', 'zh-CN')
            window.location.reload()
          }
        })
      }
    }
  }
}
</script>

<style>
    .language-icon {
        cursor: pointer;
    }
</style>
